<template>
    <div class="cover" v-if="cover" @click="cover = false"></div>
    <div class="div-1" v-if="!cover">
        <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" @select="handleSelect">
            <el-menu-item index="0">数据源</el-menu-item>
            <el-menu-item index="1">数据匹配</el-menu-item>
            <el-menu-item index="2">WEB</el-menu-item>
            <el-menu-item index="3">html解析</el-menu-item>
        </el-menu>
        <template v-if="activeIndex == '0'">
            <dataSource />
        </template>
        <template v-if="activeIndex == '1'"> 
            <dataMatching />
        </template>
        <template v-if="activeIndex == '2'"> 
            <ssh/>
        </template>
        <template v-if="activeIndex == '3'"> 
            <htmlJx />
            <!-- <helloWorld /> -->
        </template>
    </div>
</template>
<script>
import dataSource from "./dataSource.vue";
import dataMatching from "./dataMatching.vue";
import helloWorld from "./HelloWorld.vue";
import ssh from "./ssh.vue";
import htmlJx from "./htmlJx.vue";
export default {
    components: {
        dataSource,
        helloWorld,
        dataMatching,
        ssh,
        htmlJx
    },
    data() {
        return {
            cover: true ,
            activeIndex: "0",
        };
    },
    methods: {
        handleSelect(val) {
            this.activeIndex = val;
        },
    },
};
</script>
<style >
.cover {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-image: url("../assets/images/cover.png");
}
.div-1 {
    /* width: 100%; */
    text-align: left;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
</style>
